<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" inline>
      <el-form-item v-hasRole="['admin']" :label="$t('Department')">
        <department-select v-model="queryParams.deptId" style="width: 200px" />
      </el-form-item>
      <el-form-item :label="$t('Name')">
        <el-input v-model="queryParams.name" />
      </el-form-item>
      <el-form-item :label="$t('Code')">
        <el-input v-model="queryParams.code" />
      </el-form-item>
      <el-form-item :label="$t('User')">
        <el-input v-model="queryParams.userKey" />
      </el-form-item>
      <!-- <el-form-item :label="$t('Type')" prop="type">
        <dict-number-select v-model="queryParams.type" :dict="dict.type.haij_device_type" clearable @change="handleQuery" />
      </el-form-item> -->
      <!-- <el-form-item :label="$t('Action')" prop="action">
        <dict-number-select v-model="queryParams.action" :dict="dict.type.haij_device_state" clearable />
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          {{ $t("Search") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
          $t("Reset")
        }}</el-button>
      </el-form-item>
    </el-form>

    <right-toolbar :showSearch.sync="showSearch" @queryTable="queryPage"></right-toolbar>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="#" type="index" width="45" align="right">
        <template slot-scope="scope">
          <span>{{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Name')" align="left" prop="name" min-width="150" />
      <el-table-column :label="$t('Code')" align="left" prop="code" min-width="150" />
      <!-- <template slot-scope="{row}"> -->
      <!-- <el-button type="text" @click="handleDetails(row)">{{ row.code }}</el-button> -->
      <!-- </template> -->
      <!-- </el-table-column> -->
      <el-table-column :label="$t('Type')" align="left" width="150">
        <template slot-scope="{row}">
          <span>{{ typeArray[row.userType] }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('User')" align="left" prop="userKey" min-width="150">
        <template slot-scope="{row}">
          <img v-if="row.userType == 2" class="row-user-avatar" :src="avatar(row.userKey)" />
          <span v-else>{{ row.userKey }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column :label="$t('Type')" align="center" prop="userType" width="100" /> -->
      <el-table-column :label="$t('Action')" align="left" prop="action" width="150" />
      <el-table-column :label="$t('Time')" align="right" prop="time" width="150" />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="queryPage" />
  </div>
</template>

<script>
  import DataEntity from "@/components/DataEntity/DataEntity";
  import DepartmentSelect from "@/views/system/components/DepartmentSelect.vue";
  import deviceLogAPI from "@/api/device/device-log";
  import settings from '@/settings'

  export default {
    name: "DeviceLogPage",
    dicts: ["haij_device_type", "haij_device_state"],
    mixins: [DataEntity],
    components: {
      DepartmentSelect,
    },
    data() {
      return {
        typeArray: {
          0: this.$t('log.Card'),
          1: this.$t('log.Password'),
          2: this.$t('log.Face'),
          10: this.$t('log.Account'),
          11: this.$t('log.Third'),
        },
        currentAPI: deviceLogAPI,
        currentBaseURL: '/device/device-log',
        currentCode: 'device-log',
        queryParams: {
          name: null,
          code: null,
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          userKey: null,
          userType: null,
          deviceCode: null,
          action: null,
        },
        current: {
          code: null
        },
        detailsVisible: false
      };
    },
    methods: {
      avatar(uri) {
        return `${settings.baseUrl}${uri}`
      },
      handleDepartmentSelected(data) {
        this.queryParams.deptId = data.id;
        this.handleQuery();
      },
      handleDetails(row) {
        this.current = Object.assign({}, row)
        this.$router.push({
          name: 'StateLog',
          query: {
            code: row.code
          }
        })
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.deptId = undefined;
        this.handleQuery();
      }
    }
  };

</script>
